<template>
  <div class="practiceEdit">
    <div class="item title">
      <div class="btns">
        <a-button type="primary" @click="handlerShowAddPractice">
          添加常用语
        </a-button>
      </div>
      <div>
        <a-input-search v-model="filterText" :allowClear="true" enter-button placeholder="请输入查询条件" @search="onSearch"/>
      </div>
    </div>
    <div class="item table">
      <a-table
        :columns="practiceCol"
        :data-source="practiceList"
        :show-header="false"
        :pagination="false"
        :row-key="record => record.id"
        :row-selection="{type:'radio', onSelect: onSelect }"
        :scroll="{ y: 300 }">
        <template slot="action" slot-scope="text,record,index">
          <span class="display-line cursor-pointer" title="编辑">
            <i type="small" size="small" class="icon iconfont icon-edit" @click="handleEdit(record)" style="margin-right:4px"/>
          </span>
          <span class="display-line cursor-pointer" title="上移" v-if="index!=0">
            <i size="small" class="icon iconfont icon-up" @click="handleUp(record,index)" style="margin-right:4px" />
          </span>
          <span class="display-line cursor-pointer" title="下移" v-if="index!=(practiceList.length-1)">
            <i size="small" class="icon iconfont icon-down" @click="handleDown(record,index)" style="margin-right:4px" />
          </span>
          <span class="display-line cursor-pointer" title="删除">
            <a-popconfirm
              title="是否确认删除？"
              @confirm="() => handleDelete(record)"
            >
              <a href="javascript:;" class="icon iconfont icon-delete"/>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
    </div>
    <a-modal
      title="请输入要添加的常用语"
      :visible="showAddPractice"
      @ok="handlerAddPractice"
      @cancel="showAddPractice = false"
      centered
      width="25%">
      <a-textarea
        :auto-size="{ minRows: 4, maxRows: 6 }"
        v-model="newPracticeContent"
      />
    </a-modal>
    <a-modal
      title="请编辑常用语"
      :visible="showEditPractice"
      @ok="handlerEditPractice"
      @cancel="showEditPractice = false"
      centered
      width="25%">
      <a-textarea :auto-size="{ minRows: 4, maxRows: 6 }" v-model="clickPhrase.content"/>
    </a-modal>
  </div>
</template>

<script>
  import practiceService from '@/api/practiceService'

  export default {
    name: 'PracticeEdit',
    props: {},
    data () {
      return {
        showAddPractice: false,
        showEditPractice: false,
        practiceCol: [{ title: '列表', name: 'content', dataIndex: 'content' },
          { title: '操作', name: 'operation', dataIndex: 'operation', scopedSlots: { customRender: 'action' }, width: 130 }],
        filterText: '',
        newPracticeContent: '',
        practiceList: [],
        selectPhrase: null,
        clickPhrase: {}
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      listPractice (filterText) {
        practiceService.searchPractice({}, { filterText: filterText, pageSize: 99999 }).then(resp => {
          this.practiceList = resp.rows
        })
      },
      onSearch () {
        this.init(this.filterText)
      },
      handlerShowAddPractice () {
        this.newPracticeContent = ''
        this.showAddPractice = true
      },
      handlerAddPractice () {
        this.showAddPractice = false
        const practice = {
          content: this.newPracticeContent
        }
        practiceService.savePractice({}, practice).then(resp => {
          this.init()
        })
      },
      handleEdit (record) {
        this.clickPhrase = record
        this.showEditPractice = true
      },
      handlerEditPractice () {
        this.showEditPractice = false
        practiceService.savePractice({}, this.clickPhrase).then(resp => {
          this.init()
        })
      },
      handleDelete (record) {
        practiceService.deletePractice({
          practiceId: record.id
        }).then(resp => {
          this.init()
        })
      },
      handleUp (record, index) {
        var current = this.practiceList[index]
        var target = this.practiceList[index - 1]
        var params = {
          sourceId: current.id,
          targetId: target.id
        }
        practiceService.practiceMove(params).then(resp => {
          this.init()
        })
      },
      handleDown (record, index) {
        var current = this.practiceList[index]
        var target = this.practiceList[index + 1]
        var params = {
          sourceId: current.id,
          targetId: target.id
        }
        practiceService.practiceMove(params).then(resp => {
          this.init()
        })
      },
      init (search) {
        this.listPractice(search)
      },
      onSelect (record, selected, selectedRows, nativeEvent) {
        this.selectPhrase = record
      }
    }
  }
</script>

<style scoped lang="less">
  .practiceEdit{
    display: flex;
    flex-direction: column;
    .title{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .btns{
      width: 100%;
    }
    .icon-delete{
      color: red;
    }
    .display-line{
      display: inline-block !important;
    }
    .cursor-pointer {
      cursor: pointer;
    }
  }
</style>
